{% extends 'front/front_signbase.html' %}
{% from 'common/_macros.html' import static %}

{% block title %}
    博客注册
{% endblock %}

{% block head %}
    <script src="{{ static('front/js/front_signup.js') }}"></script>
{% endblock %}
{% block h2_block %}
    武汉柠檬论坛注册
{% endblock %}
{#    表单盒子#}
{% block signbox %}
    {#        表单组，上下有间隔#}
    <div class="form-group">
        {#            输入组#}
        <div class="input-group">
            {#                输入框#}
            <input type="text" class="form-control" name="telephone" placeholder="手机号码">
            {#                输入组里面的按钮#}
            <span class="input-group-btn">
                    <button id="sms-captcha-btn" class="btn btn-default">发送验证码</button>
                </span>
        </div>
    </div>

    <div class="form-group">
        {#                输入框#}
        <input type="text" class="form-control" name="sms_captcha" placeholder="短信验证码">
        {#                输入组里面的按钮#}
    </div>

    <div class="form-group">
        {#                输入框#}
        <input type="text" class="form-control" name="username" placeholder="用户名">
        {#                输入组里面的按钮#}
    </div>

    <div class="form-group">
        {#                输入框#}
        <input type="password" class="form-control" name="password1" placeholder="密码">
        {#                输入组里面的按钮#}
    </div>

    <div class="form-group">
        {#                输入框#}
        <input type="password" class="form-control" name="password2" placeholder="确认密码">
        {#                输入组里面的按钮#}
    </div>

    <div class="form-group">
        {#            输入组#}
        <div class="input-group">
            {#                输入框#}
            <input type="text" class="form-control" name="graph_captcha" placeholder="图形验证码">
            {#                输入组里面的按钮#}
            <span class="input-group-addon captcah-addon">
                    <img id="captcha-img" class="captcha-img" src="{{ url_for('common.graph_captcha') }}" alt="">
                </span>
        </div>
    </div>

    <div class="form-group">
        {# btn-blcok根据外面的盒子的宽度来展示按钮的宽度 #}
        <div class="btn btn-warning btn-block" id="submit-btn">立即注册</div>
    </div>
{% endblock %}